{include file="public/header"}

<body>

	<section id="container" class="">
		<!--header start-->
		{include file="public/headtop"}
		<!--header end-->
		<!--sidebar start-->
		<aside>
			<div id="sidebar"  class="nav-collapse ">
				<!-- sidebar menu start-->
				{include file="public/menu" /}
				<!-- sidebar menu end-->
			</div>
		</aside>
		<!--sidebar end-->
		<!--main content start-->
		<section id="main-content">
			<section class="wrapper site-min-height">
				<!-- page start-->
				<div class="row">

					<aside class="profile-info col-lg-12">

						<section class="panel">

							<div class="panel-body bio-graph-info">
								<h1>购买主机</h1>
								<div class="row">
									<div class="col-lg-12">
										<p><span>主机名 </span>: {$hostInfo.name}</p>
										<p><span>所在区域 </span>: {$hostInfo.local}</p>
										<p><span>主机配置 </span>: {$hostInfo.tag}</p>

										<p>
											<span>购买时长 </span>:
											<select class="input-sm" id="host_quantity">
												<option  value="1">1</option>
												<option  value="2">2</option>
												<option  value="3">3</option>
												<option  value="4">4</option>
												<option  value="5">5</option>
												<option  value="6">6</option>
												<option  value="7">7</option>
												<option  value="8">8</option>
												<option  value="9">9</option>
												<option  value="10">10</option>
												<option  value="11">11</option>
												<option  value="12">12</option>
											</select>/月
										</p>
										<p><span>主机单价 </span>: <span id="host_money">{$hostInfo.money}</span>元/月</p>
										<p><span>主机性能 </span>: {volist name="hostTag" id="hosttag" empty="没有标签"}<span class="btn btn-primary btn-sm">{$hosttag} </span>{/volist} </p>
										<p><span>主机环境 </span>: {volist name="service" id="hostservice" empty="没有标签"}<span class="btn btn-primary btn-sm">{$hostservice} </span>{/volist}</p>
										<p><span>特别说明 </span>: <li>该主机由宝塔面板创建，宝塔面板的功能基本都能实现</li>
											<li>介于官方目前开放的接口功能不多，目前可以只能使用部分主机功能，后期会有更多功能开放，敬请期待。</li>
											<li>本站所有购买时间按照1月=30天计算</li></p>
										<hr>
									</div>
									<div class="col-lg-4 invoice-block pull-right">
										<ul class="unstyled amounts">
											<li><span>余额 </span>: <span id="yue">{$userInfo.money}</span> 元</li>
											<li><span>小计 </span>: <span id="amount"></span> 元</li>
											<li><span>优惠 </span>: <span id="discount">{$userGroup.discount}</span> 元</li>
											<li><span>支付费用 </span>: <b><span id="payment"></span></b> 元</li>
										</ul>
									</div>
								</div>
								<hr>
								<div class="text-center invoice-btn">
									<a class="btn btn-shadow btn-danger btn-lg" id="buy_host" onclick="buy()"><i class="fa fa-check"></i> 确认购买 </a>
									<a class="btn btn-shadow btn-info btn-lg" onclick="javascript:window.print();"><i class="fa fa-print"></i> 打印 </a>
									<a class="btn btn-shadow btn-default btn-lg" href="/user/shop.html"><i class="fa fa-mail-reply-all"></i> 返回商店 </a>
									<a class="btn btn-shadow btn-success btn-lg" href="/user/pay.html"><i class="fa fa-cny"></i> 充值 </a>
								</div>
							</div>

						</section>

					</aside>

				</div>
				<div class="row">
					<div class="col-lg-12">
						<section class="panel">
							<div class="panel-body">
								<div class="modal fade" id="EchoMsg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
									<div class="modal-dialog modal-sm">
										<div class="modal-content-wrap">
											<div class="modal-content">
												<div class="modal-header">
													<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
													<h4 class="modal-title">消息通知</h4>
												</div>
												<div class="modal-body text-center" id="msgVal">

												</div>
												<div class="modal-footer">
													<button class="btn btn-danger" type="button" data-dismiss="modal"> OK</button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</section>
					</div>
				</div>

				<!-- page end-->
			</section>
		</section>
		<!--main content end-->

		<!-- Right Slidebar start -->
		{include file="public/slidright"}
		<!-- Right Slidebar end -->

		<!--footer start-->
		<footer class="site-footer">
			{include file="public/footer"}
		</footer>
		<!--footer end-->
	</section>

	<!-- js placed at the end of the document so the pages load faster -->
	<script src="__STATIC__/js/jquery.js"></script>
	<script src="__STATIC__/js/bootstrap.min.js"></script>
	<script class="include" type="text/javascript" src="__STATIC__/js/jquery.dcjqaccordion.2.7.js"></script>
	<script src="__STATIC__/js/jquery.scrollTo.min.js"></script>
	<script src="__STATIC__/js/jquery.nicescroll.js" type="text/javascript"></script>
	<script src="__STATIC__/assets/jquery-knob/js/jquery.knob.js"></script>
	<script src="__STATIC__/js/respond.min.js" ></script>

	<!--right slidebar-->
	<script src="__STATIC__/js/slidebars.min.js"></script>

	<!--common script for all pages-->
	<script src="__STATIC__/js/common-scripts.js"></script>

	<script>

		$(".knob").knob();

	</script>
	<script type="text/javascript">
		$(function() {
			sum();
			$('#host_quantity').on('change',function(){
				sum()
			});
		});
		function sum(){
			var user_money = {$userInfo.money};
			var host_quantity = $('#host_quantity option:selected').val();
			var host_money = $('#host_money').text();
			var amount = $('#amount').text();
			var discount = $('#discount').text();

			var amounts = host_quantity*host_money;
			if(amounts>user_money){
				yebz();
			}else{
				yecz();
			}
			$('#amount').text(amounts);
			var payment = (amounts-discount)<0 ? 0 : amounts-discount;
			$('#payment').text(payment);
		}
		function yebz(){
			$('#buy_host').attr('disabled','disabled');
			$('#payment').css("color","red");
		}
		function yecz(){
			$('#buy_host').removeAttr('disabled');
			$('#payment').css("color","green");
		}
		function buy(){
			$('#buy_host').attr('disabled','disabled');
			EchoMsg('正在开通主机，请稍等……');
			var hostid = {$hostInfo.id};
			var host_quantity = $('#host_quantity option:selected').val();
			$.post('', {hostid: hostid,quantity:host_quantity}, function(data, textStatus, xhr) {
				if(data.code=='200'){
					EchoMsg(data.msg,'/user/order.html');
				}else if(data.code=='-2'){
					EchoMsg('ERROR：'+data.msg,'/user/order.html');
				}else{
					EchoMsg('ERROR：'+data.msg,location.href);
				}
			});
		}
		function EchoMsg(msg,local){
			$('#msgVal').html(msg);
			$('#EchoMsg').modal('show');
			if(local){
				$('#EchoMsg').on('hidden.bs.modal', function () {
					window.location.href = local;
				})
			}
		}
	</script>

</body>
</html>
